<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>XXX shop</title>
    <!-- 网页图标icon -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/logn.png">

    <!-- css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href='${pageContext.request.contextPath}/iconfont/font_1/iconfont.css'>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/front-index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css">
    <!-- js -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/swiper.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/front-index.js"></script>
    <script src="${pageContext.request.contextPath}/js/template-web.js"></script>
    <script src="${pageContext.request.contextPath}/js/particle.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body > .wrap-cc {
            min-height: 100%;
        }

        .content-cc {
            /* padding-bottom 等于 footer 的高度 */
            padding-bottom: 90px;
        }

        .footer-cc {
            width: 100%;
            height: 80px;
            /* margin-top 为 footer 高度的负值 */
            margin-top: -80px;
        }
    </style>
    <script>
        $(function () {
            canvasParticle();// 使用默认配置
            changeUserDiv(false);
        });

        function openUserModal(isRegist) {
            if (isRegist) { //是注册
                $("#regist_modal").modal("show");
                return;
            }
            //是登录
            $("#login_modal").modal("show");
        }

        function changeUserDiv(isLogin) {
            if (isLogin) { //
                let param = $("#loginForm").serializeArray();
                $.post('${pageContext.request.contextPath}/user/login.do',
                    param, (result) => {
                        alert(result.msg);
                        if (result.success) {
                            // 成功, 则 关闭 注册的 模态框
                            // 使用 模态框的 id 调用 modal 方法 来 显示 show / 隐藏 hide 模态框
                            $("#loginOff").hide();
                            $("#loginOn").show();
                            $("#login_modal").modal("hide");
                        }
                    }, 'json');

            } else {
                $("#loginOn").hide();
                $("#loginOff").show();
            }
        }

        function doRegister() {
            let param = $("#registerForm").serializeArray();
            // TODO: 数据格式验证

            $.post('${pageContext.request.contextPath}/user/register.do',
                param, (result) => {
                    // console.log(result);
                    alert(result.msg);
                    if (result.success) {
                        // 成功, 则 关闭 注册的 模态框
                        // 使用 模态框的 id 调用 modal 方法 来 显示 show / 隐藏 hide 模态框
                        $("#regist_modal").modal("hide");
                    }
                }, 'json');
        }
    </script>
</head>

<body>
<div class="wrap-cc">
    <div class="content-cc">
        <!-- head -->
        <nav class="navbar navbar-default">
            <div class="container-fluid" style="box-shadow: 5px 5px 5px #9d9da8;padding-left: 20px;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <img src="${pageContext.request.contextPath}/images/com-logo1.png" alt="" width="120"
                         style="margin-right: 20px;">
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <form action="" class="navbar-form navbar-left searchInput" style="padding:10px;">
                        <div class="form-group">
                            <input type="text" placeholder="请输入商品名称">
                        </div>
                        <button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-search"></span>
                        </button>
                    </form>

                    <div id="loginOff" class="regist ccc">
                        <span style="margin-right: 20px;font-size: 14px;">下载APP</span>
                        <a href="javascript:openUserModal(false);" class="ccc">登录</a> &nbsp;&nbsp;/&nbsp;&nbsp;
                        <a href="javascript:openUserModal(true);" class="ccc">注册</a>
                    </div>

                    <ul id="loginOn" class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle user-active" data-toggle="dropdown" role="button">
                                <img class="img-circle" src="${pageContext.request.contextPath}/images/user.jpeg"
                                     id="userImg">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu userinfo cc">
                                <li>
                                    <img src="${pageContext.request.contextPath}/images/user.jpeg" class="img-circle"
                                         alt="">
                                    <div class="">
                                        <p>itany</p>
                                        <p>账号余额: ￥<span>236</span></p>
                                    </div>
                                </li>
                                <li>
                                    <a href="front_order.html">
                                        <i class="glyphicon glyphicon-edit"></i> 我的订单
                                    </a>
                                    <a href="front_shopcart.html">
                                        <i class="glyphicon glyphicon-shopping-cart"></i> 购物车
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-toggle="modal" data-target="#userSet">
                                        <i class="glyphicon glyphicon-cog"></i> 个人设置
                                    </a>
                                    <a href="javascript:changeUserDiv(false);"><i class="glyphicon glyphicon-off"></i>
                                        退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-- nav -->

        <!-- 精选商品 -->
        <div class="course">
            <h3 class="types-title">
                <span class="tit-icon tit-icon-l"></span>
                <em>精</em>／<em>选</em>／<em>商</em>／<em>品</em>
            </h3>
            <div class="course-box">

                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>

                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>
                <div class="course-item">
                    <div class="item-t">
                        <img src="${pageContext.request.contextPath}/images/backimage.jpg" alt="">
                    </div>
                    <div class="item-b">
                        <a href="javascript:alert('未实现');">
                            <p class="pname">Java基础入门</p>
                        </a>
                        <p class="title" title="Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点">
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点帮您快速掌握Java开发的核心要点
                        </p>
                        <p class="price-group">
                            <span class="price">￥ 59.9</span>
                            <a class="cart" href="javascript:void(0);">加入 <i
                                    class="glyphicon glyphicon-shopping-cart"></i></a>
                        </p>
                    </div>
                </div>


            </div>

        </div>

    </div>
    <div class="footer-cc">
        <div class="foots">
            <div>
                版权所有： 南京网博
            </div>
            <div>
                Copyright (C) 2002-2019 itany.com 南京市网博优壹职业培训学校 苏ICP备
            </div>
        </div>
    </div>


    <div class="modal fade" id="userSet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">个人信息</h4>
                </div>
                <form action="#" class="form-horizontal" method="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">旧密码：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="password" name="password"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">新密码：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="password" name="newPassword"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">确认密码：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="password" name="rePassword"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">昵称：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="nickname"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="phone"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                        <button type="reset" class="btn btn-info">重&nbsp;&nbsp;置</button>
                        <button type="submit" class="btn btn-info">确&nbsp;&nbsp;定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- regist modal -->
    <div class="modal fade" id="regist_modal" tabindex="-1" role="dialog" aria-labelledby="myRegistLabel">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myRegistLabel">注册</h4>
                </div>
                <form id="registerForm" action="#" class="form-horizontal" method="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">登录名：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="loginName"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="password" name="password"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">确认密码：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="password" name="rePassword"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">昵称：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="nickname"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="phone"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                        <button type="button" onclick="doRegister()" class="btn btn-info">注&nbsp;&nbsp;册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- login modal -->
    <div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLoginLabel">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myLoginLabel">登录</h4>
                </div>
                <form action="#" id="loginForm" class="form-horizontal" method="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">登录名：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="loginName"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码：</label>
                            <div class="col-sm-6">
                                <input class="form-control" type="password" name="password"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                        <button type="button" class="btn btn-info" onclick="changeUserDiv(true)">登&nbsp;&nbsp;录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

</html>
